<template>
  <div class="login">
    <div class="login_left">
      <img style="width: 100%; height: 100%;align-items: center;"
      :src="urlLogin">
    </div>
    <div class="login_right">
      <div class="login_right_box">
        <h1 style="margin-bottom: 20px;">登录</h1>
        <!-- status-icon校验图标
        rules用于做校验 -->
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm">
          <el-form-item label="" prop="mobile">
            <el-input type="text" v-model="loginForm.mobile" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="" prop="checked">
            <el-checkbox v-model="loginForm.checked" class="login_right_checkbox">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('loginForm')" :disabled="!loginForm.checked" class="login_right_btn" type="primary">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
    name:"Login",
    data() {
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号和密码'));
        } else {
          callback();
        }
      };
      var validateChecked = (rule, value, callback) => {
        if (value == false) {
          callback(new Error('您必须勾选用户的使用协议'));
        } else {
          callback();
        }
      };
      return {
        urlLogin:require('@/assets/common/login_back.png'),
        loginForm:{
          mobile:"13800000002",
          password:"hm#qd@23!",
          checked:false
        },
        rules: {
          mobile: [
            { validator: validateMobile, trigger: 'blur' }
          ],
          password: [
            { validator: validateMobile, trigger: 'blur' }
          ],
          checked:[
            { validator: validateChecked, trigger: 'change' }
          ]
        }
      }
    },
    methods:{
      // 登录
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const {data} = await this.$https.postS(this.$store.state.Mock.logins,{
              mobile:this.loginForm.mobile,
              password:this.loginForm.password,
            })
            if(data.code==10000){
              this.$message({
                message: data.message,
                type: 'success'
              });
              Cookies.set("token",data.data);
              this.$router.push("/");
            }else{
              this.$message({
                message: data.message,
                type: 'error'
              });
            }
          } else {
            this.$message({
              message: '请填写完整账号密码！',
              type: 'error'
            });
            return false;
          }
        });
      },
    }
}
</script>

<style scoped>
.login {
  display: flex;
  height: 100%;
}
.login_left{
  flex:3;
}
.login_right {
  flex: 2;
}
.login_right_box {
  width: 390px;
  height: 300px;
  margin: 180px auto;
}
.login_right_btn {
  width: 100%;
}
.login_right_checkbox {
  margin-top: 10px;
  margin-bottom: 30px;
}
</style>